<template>
  <div class="card-detail">
    <!-- title -->
    <custom-navigation :title="title" :leftBtnSrc="leftBtnSrc" @handleClick="goHomeHandler" />

    <scroll-view
      scroll-y
      scroll-with-animation
      class="scroll"
    >
      <!-- 顶部图片 -->
      <div class="img-wrapper">
        <img :src="currentOne.img_url" mode="widthFix" style="width:100%">
      </div>
      <div class="container">
        <!-- 摄影作者 -->
        <div class="pic-author">{{currentOne.picture_author}}</div>

        <!-- 日期 -->
        <div class="date">
          <span class="day">{{date.day}}</span>
          <span class="other">{{date.other}}</span>
        </div>

        <!-- 文字 -->
        <div class="content">{{currentOne.content}}</div>

        <!-- 文字作者 -->
        <div class="author">—— {{currentOne.text_authors}}</div>

        <!-- 按钮 -->
        <div class="action">
          <detail-btn :data="currentOne"></detail-btn>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import CustomNavigation from '@/components/CustomNavigation/CustomNavigation.vue'
import TextCard from '@/components/TextCard/TextCard.vue'
import DetailBtn from '@/components/DetailBtn/DetailBtn.vue'
import {mapGetters} from 'vuex'

export default {
  name: 'CardDetail',
  data () {
    return {
      date: {},
      title: '',
      leftBtnSrc: 'https://7465-test-1082be-1257701543.tcb.qcloud.la/svg/back.svg?sign=9b144308646240a9c9cde1f22262c114&t=1538310127'
    }
  },
  computed: {
    ...mapGetters([
      'currentOne'
    ])
  },
  methods: {
    goHomeHandler () {
      wx.navigateBack()
    }
  },
  mounted () {
    let Date = this.currentOne.date.split('/').reverse().map(item => {
      return item.trim()
    })
    this.date = {
      day: Date.shift(),
      other: Date.join(' / ')
    }

    this.title = this.currentOne.title
  },
  components: {
    CustomNavigation,
    TextCard,
    DetailBtn
  }
}
</script>

<style lang="stylus" scoped>
  .card-detail
    height 100%
    background: linear-gradient(135deg, #ffffff 0%, #eeeeee 100%)
    .img-wrapper
        width 100%
        height 250px
    .scroll
      height 100%
    .container
      position relative
      top -56px
      margin 20px
      background-color rgba(255, 255, 255, .9)
      box-shadow 0 5px 20px -5px #dddddd
      border-radius 10px
      z-index 2
      .pic-author
        height 38px
        line-height 38px
        text-align center
        font-size 12px
        color #666
        font-weight 100
      .date
        display flex
        align-items center
        justify-content center
        flex-direction column
        .day
          margin-top 12px
          font-size 42px
          color #333
          font-weight 200
        .other
          font-size 14px
          color #666
          font-weight 100
          border-bottom 1px solid #eee
          padding 0 10px 10px
      .content
        padding 20px
        font-size 15px
        color #333
        font-weight 300
        line-height 24px
      .author
        padding 20px
        text-align right
        font-size 12px
        color #666
        font-weight 100
      .action
        margin 12px
        padding 20px 0
        border-top 1rpx solid rgba(238, 238, 238, .5)
</style>
